<template>
    <div id="Page">
        <header>
          {{lang.name}}
        </header>
        <div id="Content">
          <Navs @onSelected="itemSelected" :rtl="lang.rtl" :navs="navs" ></Navs>
          <button @click="change">Change</button>

          <p>{{ lang.name }}</p>
          <input type="text" v-model="langCode">
          <button @click="changeLanguage()">{{ lang.select_language }}</button>
          <button @click="listLanguages">List languages</button>
            <template v-if="available != null">
              <ul>
                <li v-for="item in available.list" :key="item.code">Name: {{ item.name }}, Label: {{ item.label }}, Code: {{ item.code }}</li>
              </ul>
            </template>
        </div>
        <router-view/>
        <footer>

        </footer>
    </div>
    
</template>

<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";

/**************image */
import languageImgae from "./assets/images/language.png";
import databaseImage from "./assets/images/database.svg";
/**************image */

import Navs from "./components/Nav";
import store from "./Store";

export default {
  components: {
    Navs
  },
  data: () => {
    return {
      langCode: "",
      navs: [],
      navIndex: 0,
    };
  },
  computed: {
    ...mapState("lang/management", ["available"]),
    lang() {
      return store.state.lang;
    }
  },
  methods: {
    itemSelected(index, item) {
      this.navIndex = index;
    },
    changeLanguage() {
      store.dispatch("lang/management/changeLanguage", this.langCode);
    },
    change() {
      console.log(this.language);
    },
    ...mapActions("lang/management", ["listLanguages"]),
  },
  created() {
    this.navs = [
      {
        link: "/Hello",
        text: () => this.lang.language,
        image: languageImgae
      },
      {
        link: "/Okay",
        text: () => this.lang.initialize,
        image: databaseImage
      }
    ];

    console.log(this)
  }
};
</script>


<style lang="scss" scoped>
@import "./assets/style";
@import "./assets/colors";

$Page-Margin: 0;
$header-height: 30px;
$footer-height: $header-height;
$border-line-color: #ccc;

* {
  margin: 0;
  padding: 0;
}

#Page {
  position: absolute;
  top: $Page-Margin;
  bottom: $Page-Margin;
  left: $Page-Margin;
  right: $Page-Margin;
  // background-color: pink;

  display: flex;
  flex-flow: column;

  header {
    background-color: $primary-background-color;
    height: $header-height;
    width: 100%;
    border: {
      bottom: {
        color: $border-line-color;
        width: 1px;
        style: solid;
      }
    }
    text-align: center;
  }

  #Content {
    width: 100%;
    // background-color: red;
    flex-grow: 1;
  }

  footer {
    height: $footer-height;
    width: 100%;
    border: {
      top: {
        color: $border-line-color;
        width: 1px;
        style: solid;
      }
    }
  }
}

button {
  @include PrimarySet();
}
</style>

<style>
@font-face {
  font-family: ukij-cjk;
  src: url("./assets/UKIJCJK.ttf");
}

* {
  font-family: ukij-cjk;
}
</style>